//特别检查
import React, { useEffect, useState } from 'react';
import { message, Space, Table, Modal } from 'antd';
import type { TableProps } from 'antd';
import { DatePicker } from 'antd';
import '../../../css/oper_inspertion/search.less'
import { getSpecial, deleteSpecial } from '../../../../../api/csy/api'
import { Select } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';

interface DataType {
    key: string;
    title: string;
    year: string;
    name: string;
    time: string;
    rusult: string;
}



const Special: React.FC = () => {
    //时间
    const [value, setValue] = useState<string | string[]>('')
    //检查结果
    const [value1, setValue1] = useState('')

    const [showContent, setShowContent] = useState(true);

    const result = () => {
        getdata()
    }
    const navigate = useNavigate()
    const dianji = () => {
        setShowContent(false)
        navigate('/service/Operational/security/indexSpecial/addSpecialInspection')
    }
    const [data, setData] = useState<DataType[]>([])
    const getdata = () => {
        getSpecial().then(res => {
            setData(res.data.data)
        })
    }
    useEffect(() => {
        getdata()
    }, [])

    const dian = () => {

        const dat = data.filter((item: any) => {
            if (item.rusult === value1) {
                return item
            } else if (item.year === value) {
                return item
            }
        })
        setData(dat)
    }

    // 添加模态框相关状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentRecord, setCurrentRecord] = useState<any>(null);

    // 显示模态框
    const showModal = (record: any) => {
        setCurrentRecord(record);
        setIsModalVisible(true);
    };

    // 关闭模态框
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, na, index) =>
                <>
                    <span>{index + 1}</span>
                </>,
        },
        {
            title: '检查主题',
            dataIndex: 'title',
            key: 'title',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '年份',
            dataIndex: 'year',
            key: 'year',
        },
        {
            title: '任务下达人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '检查时间',
            dataIndex: 'time',
            key: 'time',
            //格式化时间
            render: (text) => <span>{text.slice(0, 10)}</span>,
        },
        {
            title: '检查结果',
            key: 'rusult',
            dataIndex: 'rusult',
            render: (_, { rusult }) =>
                <>
                    {rusult}
                </>
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <button 
                        style={{ color: '#1890ff', border: 'none', background: 'none' }}
                        onClick={() => showModal(record)}
                    >
                        查看
                    </button>
                    <button style={{ color: '#f5222d', border: 'none', background: 'none' }} onClick={() => sc(record)}>删除</button>
                </Space>
            ),
        },
    ];

    const sc = (val:any) => {
        console.log(val._id)
        deleteSpecial({ id: val._id }).then(res => {
            if (res.data.code === 200) {
                message.success('删除成功')
                getdata()
            } else {
                message.error('删除失败')
            }
        })
    }
    return (
        <>
            {
                showContent && <>
                    <div className='search'>
                        <span>年份:
                            <DatePicker onChange={(value, date) => setValue(date)} picker="year" />
                        </span>
                        <span className='search_person'>检查结果
                            <Select
                                className='search_select'
                                showSearch
                                placeholder="请选择"
                                filterOption={(input, option) =>
                                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                }
                                onChange={(value) => {
                                    setValue1(value)
                                }}
                                options={[
                                    { value: '隐患', label: '隐患' },
                                    { value: '正常', label: '正常' },
                                ]}
                            />
                        </span>
                        <button className='search_btn' onClick={dian}>查询</button>
                        <button className='reset' onClick={result}>重置</button>
                    </div>
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }}>
                            <button style={{
                                display: 'inline-block',
                                width: '80px',
                                height: '30px',
                                lineHeight: '30px',
                                border: 'none',
                                color: '#1890ff', marginRight: '10px',
                            }} onClick={dianji}
                            >发起</button>
                        </div>
                        <Table<DataType>
                            columns={columns}
                            dataSource={data}
                            pagination={{
                                pageSize: 5,
                            }}
                        />
                    </div>
                    <Modal
                        title="检查详情"
                        visible={isModalVisible}
                        onCancel={handleCancel}
                        footer={null}
                        width={600}
                    >
                        {currentRecord && (
                            <div className="inspection-detail">
                                <div className="detail-item">
                                    <span className="label">检查主题：</span>
                                    <span className="value">{currentRecord.title}</span>
                                </div>
                                <div className="detail-item">
                                    <span className="label">年份：</span>
                                    <span className="value">{currentRecord.year}</span>
                                </div>
                                <div className="detail-item">
                                    <span className="label">任务下达人：</span>
                                    <span className="value">{currentRecord.name}</span>
                                </div>
                                <div className="detail-item">
                                    <span className="label">检查时间：</span>
                                    <span className="value">{currentRecord.time.slice(0, 10)}</span>
                                </div>
                                <div className="detail-item">
                                    <span className="label">检查结果：</span>
                                    <span className={`value status-${currentRecord.rusult === '正常' ? 'normal' : 'warning'}`}>
                                        {currentRecord.rusult}
                                    </span>
                                </div>
                            </div>
                        )}
                    </Modal>
                </>
            }
            <Outlet></Outlet>
        </>
    )
};

export default Special;